<meta meta="首页配置" args="data"/>
<style>
    .floor-angle {
        transition: all .3s ease-in 0s;
        font-size: 20px;
        cursor: pointer;
    }

    .floor-close .floor-angle {
        transform: rotate(-90deg);
    }

    .floor-close .rows-panel {
        display: none;
    }
</style>
<div class="p-b">
    <form id="itemFloor" class="">

    </form>
</div>
<div class="p-b">
    <a href="javascript:;" class="btn btn-default btn-xm"
       s-click="addFloor()">
        <i class="fa fa-plus"></i> 新增楼层
    </a>
    <a href="javascript:;" s-click="S.alert(JSON.stringify(getContent()))">测试</a>
</div>
<div id="floorsPanel" s="nda,loop" s-data="floorList()" style="max-height: 700px; overflow: auto">
    <div class="panel panel-default floor" s-loop-role="row" s="datac">
        <div class="panel-heading floor-sort-handle form-inline clearfix">
            <form class="floor-input-form pull-left">
                <i class="fa fa-arrows text-danger"></i>
                <input autocomplete="off" type="text" class="form-control input-sm" placeholder="请输入楼层标题"
                       style="width: 300px;" value="" name="title" data-floor-key="title"/>
                <div style="display: inline-block" s="tpl">
                    <img src="{%=this.titlePicUrl%}" style="max-height: 50px;" s-dblclick="removeFloorTitleImage(this)"/>
                    <input autocomplete="off" type="hidden" class="titlePic" value="{%=this.titlePic%}" name="titlePic"/>
                    <input autocomplete="off" type="text" class="form-control titlePicWidth input-sm" placeholder="长度"
                           style="width: 100px;" value="{%=this.titlePicWidth%}" name="titlePicWidth"/> &times;
                    <input autocomplete="off" type="text" class="form-control titlePicHeight input-sm" placeholder="宽度"
                           style="width: 100px;" value="{%=this.titlePicHeight%}" name="titlePicHeight"/>
                    <i class="fa fa-image" s-click="uploadFloorTitleImage(this)"></i>
                </div>
                <select name="showTitle" class="form-control input-sm">
                    <option value="false">隐藏标题</option>
                    <option value="true">显示标题</option>
                </select>
            </form>
            <div class="pull-right">
                <a href="javascript:;" class="btn btn-sm btn-danger btn-outline" s-click="remove(this)"><i class="fa fa-remove "></i>
                    删除</a>
                <a><i class="fa fa-anglex`x-down floor-angle"></i></a>
            </div>
        </div>
        <div class="floor-columns">
            <div class="panel-body rows-panel" s="window"></div>
        </div>
    </div>
</div>
<script>
    function floorList() {
        return data.floorList
    }

    $floorsPanel.node.sortable({
        handle: ".floor-sort-handle"
    }).delegate(".floor-angle", 'click', function (e) {
        var target = $(e.currentTarget)
        var panel = target.closest(".panel");
        var floorPanel = panel.find(".rows-panel");
        if (floorPanel.is(":visible")) {
            floorPanel.slideUp();
            panel.addClass("floor-close")
        } else {
            floorPanel.slideDown();
            panel.removeClass("floor-close")
            var $panel = Smart.of(panel);

        }
    })

    function uploadFloorTitleImage($this) {
        selectImage().done(function(datas) {
            if(datas.length) {
                var container = $this.node.parent();
                var img = container.find("img").attr("src", datas[0].url)
                container.find(".titlePic").val(datas[0].key)
                setTimeout(function() {
                    container.find(".titlePicWidth").val(img[0].naturalWidth)
                    container.find(".titlePicHeight").val(img[0].naturalHeight)
                }, 300);
            }
        })
    }

    function removeFloorTitleImage($this) {
        var container = $this.node.parent()
        container.find("img").attr("src", "")
        container.find(".titlePic").val("")
    }

    function selectImage() {
        return S.popupOpen("/oss/objects-selector.html", {prefix: 'operation'})
    }

    function remove($this) {
        S.confirm("确认删除吗？").done(function () {
            $this.node.parentsUntil(".panel").parent().remove();
        })
    }

    function addFloor() {
        $floorsPanel.addRows([{
            title: '',
            rowList: [
                {
                    showcaseList: []
                }
            ]
        }]).done(function () {
            loadRowsPanel()
        });
    }

    S.on("s-ready", function () {
        loadRowsPanel();
    })

    function loadRowsPanel() {
        S.N(".rows-panel").each(function () {
            var floorPanel = $(this)
            if (floorPanel.data("loaded")) {
                return;
            }
            floorPanel.data("loaded", true)
            var $floorPanel = Smart.of(floorPanel);
            var $panel = $floorPanel.parent();
            $floorPanel.load("/operation-center/IndexFloorSetting-floor.html", {
                rowList: $panel.data().rowList
            })
        })
    }

    function getContent() {
        var floorList = [];
        $floorsPanel.node.find(".floor").each(function () {
            var node = $(this);
            var $floor = Smart.of(node);
            var data = $floor.data();
            var $rowsPanel = Smart.of($floor.node.find(".rows-panel"))
            data.rowList = $rowsPanel.getContent()
            var form = node.find("form.floor-input-form");
            $.extend(data, Smart.serializeToObject(form))
            floorList.push(data);
        })
        return {
            floorList: floorList
        }
    }

    S.getContent = function() {
        var deferred = $.Deferred();
        var content = getContent();
        if(content.floorList.length == 0) {
            return deferred.reject()
        }
        for(var i in content.floorList) {
            var floor = content.floorList[i]
            if(!floor.rowList || !floor.rowList.length) {
                S.alert("第" + i + "楼没有添加行");
                return  deferred.reject();

            } else {
                for( var j in floor.rowList) {
                    var row = floor.rowList[j]
                    if(!row.showcaseList || !row.showcaseList.length) {
                        S.alert("第" + (i + 1) + "楼第" + (j + 1) +"行没有添加橱窗");
                        return deferred.reject()
                    }
                }
            }
        }
        deferred.resolve(content);
        return deferred;
    };

</script>